<template>
	<div class="page-common-layout">
		<div class="page-common-left" style="width:35%">
			<DataGrid
				ref="masterList"
				type="master"
				:url="url"
				:columns="columns"
				rowKey="uuid"
				showPagination="auto"
				:showRowSelect="false"
				:showTotal="false"
				:scroll="scrollXY"
				@rowClick="(e) => {
					masterRowClick(e, { id: 'id' });
				}"
			>
			</DataGrid>
		</div>
		<div class="page-common-content">
			<div class="page-common-box-content">
				<tool-bar @search="$refs.subList.refresh(true)" @reset="
				    () => {
				      (subQueryParam = {}), $refs.subList.refresh(true);
				    }
				  ">
					<template slot="toolBtn" slot-scope="scope">
						<a-button class="cu-btn-primary" icon="plus"
							@click="handleAdd('sub')" v-action:archiveAddDialog>{{$ct("add","新增")}}
						</a-button>

						<a-button class="cu-btn-danger" icon="delete"
							@click="handleSub($refs.subList.selectedRowKeys, 'sub')" v-action:archiveAddDialog>{{$ct("delete","删除")}}
						</a-button>
					</template>
					<template slot="toolForm">
						<a-form-item :label="$ct('resourceName','资源名称')">
							<a-input v-model="subQueryParam.title" :placeholder="$ct('resourceName','资源名称')" />
						</a-form-item>
					</template>
				</tool-bar>
				<DataGrid ref="subList" type="sub" :url="url" :columns="subColumns" :queryParam="subQueryParam"
					rowKey="uuid" showPagination="auto" @rowClick="subRowClick">
					<span slot="renderAction" slot-scope="{ text, record }">
						<template>
							<a @click="handleEdit(record, 'sub')">{{$ct("edit","编辑")}}</a>
							<span class="action-margin"></span>
							<a @click="handleSub(record, 'sub')" class="action-delete">{{$ct("delete","删除")}}</a>
						</template>
					</span>
				</DataGrid>
			</div>
			<div class="page-common-box-content">
				<a-tabs default-active-key="1">
					<a-tab-pane key="1" :tab="$ct('attachmentInformation','附件信息')">
						<Accessory ref="accessoryList" :url="fileUrl" fileType="local"></Accessory>
					</a-tab-pane>
				</a-tabs>
			</div>
		</div>
		<edit-form ref="subModal" :visible="subVisible" :loading="subConfirmLoading" :model="subMdl"
			@cancel="handleCancel('sub')" @ok="handleOk('sub')" />
	</div>
</template>
<script>
	import {
		DataGrid
	} from "@/components";
	import {
		masterTableMixin
	} from "@/mixins/masterTableMixin";
	import editForm from "./edit.vue";
	import Accessory from "@/components/TopVUI/accessory/index";

	export default {
		mixins: [masterTableMixin],
		components: {
			editForm,
			DataGrid,
			Accessory,
		},
		data() {
			return {
				key: "1",
				columns: [{
					title: "分类名称",
					align: "left",
					dataIndex: "text",
					langCode: "classifyName"
				}, ],
				subColumns: [{
						title: "资源名称",
						dataIndex: "title",
						ellipsis: true,
          langCode: "resourceName",
					},
					{
						title: "创建时间",
						align: "left",
						dataIndex: "createTime",
						sorter: true,
						langCode: "createTime",
					},
					{
						title: "创建者",
						align: "left",
						dataIndex: "creator",
            langCode: "createdBy",
					},
					{
						title: "操作",
						width: 150,
						align: "center",
						dataIndex: "action",
						scopedSlots: {
							customRender: "renderAction"
						},
					},
				],
				masterVisible: false,
				subVisible: false,
				masterConfirmLoading: false,
				subConfirmLoading: false,
				masterMdl: null,
				subMdl: null,
				// 高级搜索 展开/关闭
				advanced: false,
				// 查询参数
				queryParam: {},
				subQueryParam: {},
				url: {
					masterList: "/system/channel/getPageSetData",
					subList: "/system/archive/getPageSetData",
					subAdd: "/system/archive/save",
					subUpdate: "/system/archive/update",
					subDelete: "/system/archive/delete",
					deleteAttachment: "/system/attachment/delete",
					getDetailByUuid: "/system/attachment/getListByPuuid",
				},
				fileUrl: {
					webUpload: "/system/attachment/upload",
					getPageSet: "/system/attachment/getListByPuuid",
					deleteBatch: "/system/attachment/delete",
					update: "/system/attachment/update",
				},
				queryParamAccessory: {},
				pageClientHeight: 0
			};
		},
		activated() {},
		beforeDestroy() {
		  this.destroyResizeEvent();
		},
		mounted() {
			this.resizeHandler();
			this.initResizeEvent();
    },
		computed: {
			scrollXY() {
			  let height = this.pageClientHeight - 100;
			  return { y: height };
			}
		},
		methods: {
			subRowClick(record) {
				this.$refs.subList.rows = record;
				this.queryParamAccessory.puuid = record.uuid;
				this.$refs.accessoryList.refreshList(this.queryParamAccessory); // 设置刷新子表
			},
			resizeHandler() {
			  // 获取页面内容的高度
			  this.pageClientHeight = document.getElementsByClassName(
			    "page-common-content"
			  )[0]?.clientHeight;
			},
			//监听resize
			initResizeEvent() {
			  window.addEventListener("resize", this.resizeHandler, false);
			},
			//移除resize
			destroyResizeEvent() {
			  window.removeEventListener("resize", this.resizeHandler);
			},
		},
	};
</script>

<style scope>
	.table-operator {
		margin-left: 18px;
	}

	.ant-table-tbody>tr>td:last-child {
		padding: 16px 16px;
	}
</style>
